<template>
    <div class="header">
        <div class="header_left">
          <span class="iconfont">&#xe624;</span>
        </div>
      <div class="header_input">
        <div class="iconfont search">&#xe632;</div>
        输入城市/地名xxxx
      </div>
      <router-link to="/city">
        <div class="header_right">
          <!--{{this.$store.state.city}}-->
          {{city}}
          <span class="iconfont city">&#xe64a;</span>
        </div>
      </router-link>
    </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: 'HomeHeader',
  computed: {
    ...mapState(['city'])
  },
  props: {
  }
}
</script>
<style scoped lang="stylus">
  @import "~styles/variables.styl"
 /**
 在css中引入外部文件，需要在前面加上波浪号
  */
.header {
  height: .86rem;
  background: $bgColor;
  color: #fff;
  display: flex;
  text-align: center;
  line-height: .86rem;
}
.header_left{
  float:left;
  width:.64rem
}
.header_right{
  float:right;
  min-width:1.04rem;
  color:#fff
}
.header_right .city{
  font-size:.24rem;
}
.header_input {
  flex: 1;
  border-radius: .1rem;
  background: #ffffff;
  margin: .12rem;
  color: #666;
  text-align: left;
  line-height: .64rem;
}
.search{
  color:#ccc;
  float:left;
  line-height:.68rem;
  margin-left:0.15rem;
}
</style>
